<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>混合选择器</title>
    <style>
        /*
            多个选择器之间以逗号分隔
            表示这些选择器均使用对应的样式
            即:分别找到所有符合这些选择器规则的所有元素
         */
        #d1,.c1{
            color:red;
        }
        /*
            多个选择器之间以空格分隔
            表示先匹配前面的选择器所匹配到的所有元素
            在这些匹配到的元素的基础上对其后代元素进行匹配
            后代元素:子元素、子元素的子元素、子元素的子元素的子元素...
            在这些后代中匹配符合后一个选择器规则的所有元素
            以此类推
         */
        #d2 .c2{
            color:green;
        }
        /*
            多个选择器之间以>进行分隔
            表示先匹配前面的选择器所匹配到的所有元素
            在这些匹配到的元素的基础上对其子元素进行匹配
            在这些子元素中匹配符合后一个选择器规则的所有元素
            以此类推
         */
        #d3>.c3{
            color:blue;
        }
        /*
            多个选择器之间以+分隔
            表示先匹配到第一个选择器所匹配的所有元素
            在这些已经匹配到的元素的基础上找到紧着跟这个元素的下一个元素
            在找到的这些元素中使用后一个选择器规则进行匹配
            以此类推
         */
        .c4+span{
            color:pink;
        }
        /*
            多个选择器以~分隔
            表示先匹配到第一个选择器所匹配的所有元素
            在这些已经匹配到的元素的基础上找到这个元素的后面的所有元素
            在找到的这些元素中使用后一个选择器规则进行匹配
            以此类推
         */
        .c5~span{
            color:orangered;
        }
    </style>
</head>
<body>
<h1>多个选择器以,分隔</h1>
<div id="d1">
    这是一个div<br/>
    <span class="c1">这是一个span</span>
    <p>这是一个段落</p>
</div>
<h1>多个选择器以空格分隔</h1>
<div id="d2">
    这是一个div<br/>
    <span class="c2">这是d2中的span</span>
    <div>
        这是d2中的div<br/>
        <span class="c2">这是d2中的div中的span</span>
    </div>
</div>
<span class="c2">这是span</span>
<h1>多个选择器以>分隔</h1>
<div id="d3">
    这是一个div<br/>
    <span class="c3">这是d3中的span</span>
    <div>
        这是d3中的div<br/>
        <span class="c3">这是d3中的div中的span</span>
    </div>
</div>

<h1>多个选择器以+号分隔</h1>
<div class="c4">这是c4</div>
<span>这是c4后的span</span><br/>
<span>这是c4后的span后的span</span><br/>
<div class="c4">这是c4</div>
<p>这是c4后面的段落</p>
<span>这是c4后的段落后的span</span><br/>
<span>这是c4后的段落后的span后的span</span><br/>

<h1>多个选择器以~分隔</h1>
<div class="c5">这是c5</div>
<span>这是c5后的span</span><br/>
<span>这是c5后的span后的span</span><br/>
<div class="c5">这是c4</div>
<p>这是c5后面的段落</p>
<span>这是c5后的段落后的span</span><br/>
<span>这是c5后的段落后的span后的span</span><br/>
</body>
</html>